<template>
	<view>
		<view v-for="(item,index) in indexData.module" :key="index">
			<uni-swiper-dot v-if="item.name == 'banner'" :info="indexData.banner" :current="current" mode="round">
				<swiper class="banner-box" autoplay="true" interval="5000" duration="500" circular="true" @change="change">
					<swiper-item v-for="(item ,index) in indexData.banner" :key="index">
						<view class="screen-swiper" @click="navTo(item)">
							<image class="image" :src="item.image" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<np-grid v-if="item.name == 'nav'" :navs='indexData.nav' :bgRound="true"></np-grid>
			<block v-for="(block,b) in indexData.block" :key="b" v-if="item.block_id==block.id">
				<np-grid-image :round="true" :imageBlock="block"></np-grid-image>
			</block>
			<view v-if="item.name == 'notice'">
				<view class="notice-box">
					<view class="np-notice" @click="navPage('/pages/tabbar/notice/notice')">
						<view class="npIcon-notice"></view>
						<view class="np-notice-text" :class="[index == 0 && indexData.banner.length>0 ? 'text-white': '']">{{indexData.notice || ''}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
			}
		},
		props: {
			indexData: {}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
				this.$emit('swiperChange', e.detail.current);
			},
			navTo(item) {
				this.$config.navTo(item);
			},
			navPage(url){
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.banner-box {
		padding: 0 25rpx;
		height: 274rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.screen-swiper {
		height: 100%;
		min-height: 100% !important;

		image {
			width: 100%;
			height: 274rpx;
			border-radius: 10rpx;
		}
	}
	
	.np-notice {
		margin: 0 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		font-size: 26rpx;
	}
	
	.npIcon-notice {
		font-size: 32rpx;
		color: #FF0000;
		margin-right: 30rpx;
	}
	
	.np-notice-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: all linear 0.2s;
	}
</style>
